<template>
  <Modal v-model:visible="showModal" title="活跃用户数" width="60vw">
    <div class="flex flex-col">
      <a-tabs v-model:activeKey="activeKey" size="small" @change="onChangeGs()">
        <a-tab-pane key="4" tab="总体情况"></a-tab-pane>
        <a-tab-pane key="0" tab="移动"></a-tab-pane>
        <a-tab-pane key="1" tab="电信"></a-tab-pane>
        <a-tab-pane key="2" tab="联通"></a-tab-pane>
        <a-tab-pane key="3" tab="广电"></a-tab-pane>
      </a-tabs>

      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadData"
        ></a-select>
      </div>
      <div v-if="activeKey === '4'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="activeUsersCount" title="活跃用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.activeUsersCount || 0 }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="activeUsersPercentage" title="活跃用户数占比" minWidth="120" :sortable="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.activeUsersPercentage }}%-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="inflowCount" title="流入用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.inflowCount || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="outflowCount" title="流出用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.outflowCount || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="callsCount" title="话务量(ERL)" :sortable="true">
            <template #default="{ row }">
              {{ row.callsCount || 0 }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '0'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="actUsers" title="活跃用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.actUsers || 0 }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="activeUsersPercentage" title="活跃用户数占比" minWidth="120" :sortable="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.activeUsersPercentage }}%-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="inflowNumberUsers" title="流入用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.inflowNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="flowOutNumberUsers" title="流出用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.flowOutNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="trafficVolume" title="话务量(ERL)" :sortable="true">
            <template #default="{ row }">
              {{ row.trafficVolume || 0 }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '1'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="actUsers" title="活跃用户数(户)" width="150" :sortable="true">
            <template #default="{ row }">
              {{ row.actUsers || 0 }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="activeUsersPercentage" title="活跃用户数占比" minWidth="120" :sortable="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.activeUsersPercentage }}%-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="inflowNumberUsers" title="流入用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.inflowNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="flowOutNumberUsers" title="流出用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.flowOutNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="trafficVolume" title="话务量(ERL)" :sortable="true">
            <template #default="{ row }">
              {{ row.trafficVolume || 0 }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '2'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="actUsers" title="活跃用户数(户)" width="150" :sortable="true">
            <template #default="{ row }">
              {{ row.actUsers || 0 }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="activeUsersPercentage" title="活跃用户数占比" minWidth="120" :sortable="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.activeUsersPercentage }}%-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="inflowNumberUsers" title="流入用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.inflowNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="flowOutNumberUsers" title="流出用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.flowOutNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="trafficVolume" title="话务量(ERL)" :sortable="true">
            <template #default="{ row }">
              {{ row.trafficVolume || 0 }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '3'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="actUsers" title="活跃用户数(户)" width="150" :sortable="true">
            <template #default="{ row }">
              {{ row.actUsers || 0 }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="activeUsersPercentage" title="活跃用户数占比" minWidth="120" :sortable="true">-->
          <!--            <template #default="{ row }">-->
          <!--              {{ row.activeUsersPercentage }}%-->
          <!--            </template>-->
          <!--          </vxe-column>-->
          <vxe-column field="inflowNumberUsers" title="流入用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.inflowNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="flowOutNumberUsers" title="流出用户数(户)" :sortable="true">
            <template #default="{ row }">
              {{ row.flowOutNumberUsers || 0 }}
            </template>
          </vxe-column>
          <vxe-column field="trafficVolume" title="话务量(ERL)" :sortable="true">
            <template #default="{ row }">
              {{ row.trafficVolume || 0 }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'
const activeKey = ref('4')

const isLoading = ref(false)

const showModal = ref(false)

const searchParams = ref({
  year: '',
})
const tableData = ref<any[]>([])

// 统一管理表格样式
const customTableStyle = {
  ...utils.customTableStyle,
  footerMethod: ({ columns, data }) => {
    const footerData = [
      columns.map((column, columnIndex) => {
        if (activeKey.value === '4') {
          if (columnIndex === 0) {
            return '合计'
          }
          if (['inflowCount', 'outflowCount'].includes(column.field)) {
            return (utils.sumNum(data, column.field) || '') + '(户)'
          } else if (['callsCount'].includes(column.field)) {
            return (utils.sumNum(data, column.field) || '') + 'ERL'
          }
        } else {
          if (columnIndex === 0) {
            return '合计'
          }
          if (['inflowNumberUsers', 'flowOutNumberUsers'].includes(column.field)) {
            return (utils.sumNum(data, column.field) || '') + '(户)'
          } else if (['trafficVolume'].includes(column.field)) {
            return (utils.sumNum(data, column.field) || '') + 'ERL'
          }
        }

        return ''
      }),
    ]
    return footerData
  },
}

function onChangeGs() {
  loadData()
}

function loadData() {
  isLoading.value = true
  Apis.szbt.signal
    .get_getChartData({
      params: {
        year: searchParams.value.year,
        month: '12',
        flag: activeKey.value,
      },
    })
    .then((res) => {
      tableData.value = (res.months || [])
        .filter((item) => item.year == searchParams.value.year)
        .sort((a: any, b: any) => {
          // 再按月份倒序
          if (b.month !== a.month) {
            return a.month - b.month
          }
          if (activeKey.value == '4') {
            return b.activeUsersCount - a.activeUsersCount
          } else {
            return b.actUsers - a.actUsers
          }
        })
        .map((item: any, index: number) => {
          item.index = index + 1
          if (activeKey.value == '4') {
            const totalCount = item.activeUsersCount || 0
            item.totalCount = totalCount
          } else {
            const totalCount = item.actUsers || 0
            item.totalCount = totalCount
          }
          return item
        })
      if (activeKey.value == '4') {
        const totalActiveUsers = tableData.value.reduce(
          (sum, item) => sum + (item.activeUsersCount || 0),
          0,
        )
        tableData.value = tableData.value.map((item) => {
          const activeUsersCount = item.activeUsersCount || 0
          item.activeUsersPercentage = totalActiveUsers
            ? ((activeUsersCount / totalActiveUsers) * 100).toFixed(2)
            : 0
          return item
        })
      } else {
        const totalActiveUsers = tableData.value.reduce(
          (sum, item) => sum + (item.actUsers || 0),
          0,
        )
        tableData.value = tableData.value.map((item) => {
          const actUsers = item.actUsers || 0
          item.activeUsersPercentage = totalActiveUsers
            ? ((actUsers / totalActiveUsers) * 100).toFixed(2)
            : 0
          return item
        })
      }
    })
    .catch((err) => {
      message.error('获取数据失败')
    })
    .finally(() => {
      isLoading.value = false
    })
}

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadData()
  },
})
</script>

<style lang="scss" src="@/styles/custom-vxe-table.scss"></style>
